<template>
    <div>
        <div class="common-layout">
            <el-container style="height: 100vh">
                <el-aside width="200px" style="height: 100vh">
                    <el-row class="tac">
                        <el-col :span="24">
                            <!--                            <el-switch-->
                            <!--                                inline-prompt-->
                            <!--                                v-model="theme"-->
                            <!--                                @click="toggle()"-->
                            <!--                            >-->
                            <!--                            </el-switch>-->
                            <el-menu
                                active-text-color="#ffd04b"
                                background-color="#545c64"
                                text-color="#fff"
                                :default-active="editableTabsValue"
                                unique-opened
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose"
                                @select="handleSelect"
                                style="height: 100vh"
                                :router="true"
                            >
                                <el-sub-menu index="1">
                                    <template #title>
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-shangpinguanli"></use>
                                        </svg>
                                        <span @click="console.log(routers.options)">商品系统</span>
                                    </template>
                                    <el-menu-item-group title="">
                                        <el-menu-item :index="routers.options.routes[1].children[0].meta.absolutePath"
                                        >
                                            {{ routers.options.routes[1].children[0].meta.title }}
                                        </el-menu-item>
                                        <el-menu-item :index="routers.options.routes[1].children[1].meta.absolutePath">
                                            {{ routers.options.routes[1].children[1].meta.title }}
                                        </el-menu-item>
                                        <el-menu-item :index="routers.options.routes[1].children[2].meta.absolutePath">
                                            {{ routers.options.routes[1].children[2].meta.title }}
                                        </el-menu-item>
                                    </el-menu-item-group>
                                </el-sub-menu>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-container>
                    <el-header style="height: 30px">
                        <el-tabs
                            v-model="editableTabsValue"
                            type="card"
                            class="demo-tabs"
                            :closable="true"
                            @edit="handleTabsEdit"
                            @tab-remove="closeTab"
                            @tab-click="tabClick"
                        >
                            <el-tab-pane
                                v-for="(item,index) in editableTabs"
                                :key="index"
                                :label="item.title"
                                :name="item.name"
                            >
                            </el-tab-pane>
                        </el-tabs>
                    </el-header >
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from "@/router/router.ts";
import { useRoute } from "vue-router";
import { ref } from "vue";
import { useToggle } from "@vueuse/shared";
import { useDark } from "@vueuse/core";
import { ElMessage, TabsPaneContext } from "element-plus";
import Tools from "@/tool/Tools.ts";

const theme = ref<boolean>(false);
const route = ref(useRoute());
const routers = router;
const routerPath = ref(route.value.path);
const a = ref({
    name: "张",
});
//----------------------------------------------------------------------------------------主题切换模块
const isDark = useDark({
    // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
    storageKey: "useDarkKEY",
    // 暗黑class名字
    valueDark: "dark",
    // 高亮class名字
    valueLight: "light",
});
const toggle = useToggle(isDark);
//----------------------------------------------------------------------------------------页头菜单模块
// 页头菜单选中的项
const editableTabsValue = ref("");

interface Tab {
    title: string;
    name: string;
}

//页头菜单数据
const editableTabs = ref<Array<Tab>>([]);
//关闭页头菜单
const closeTab = (targetName: string) => {
    for (let i = editableTabs.value.length - 1; i >= 0; i--) {
        if (editableTabs.value[i].name === targetName) {
            // console.log(`删除页头菜单${targetName}`);
            //如果这个即将删除的菜单是最后一个位置,那么就跳转到总页头菜单的上一个
            if (i===0){
                ElMessage.error("这是最后一个菜单,无法删除");
                return;
            }
            if (i === editableTabs.value.length - 1 && i > 0) {
                editableTabsValue.value = editableTabs.value[i - 1].name;
            }
            editableTabs.value.splice(i, 1);
            routers.push(editableTabs.value[i - 1].name);
            // console.log(`删除后页头菜单数据为${JSON.stringify(editableTabs.value)}`);
        }
    }
};
//点击页头菜单
const tabClick = (pane: TabsPaneContext, ev: Event) => {
    //页面跳转
    routers.push(pane.paneName as string);
    //菜单选中
    editableTabsValue.value = pane.paneName as string;
    // console.log(`点中页头菜单后,路由路径为${route.value.path}`);
};
//添加页头菜单
const addTabs = (index: string) => {
    // 如果页头菜单数据中已经存在这个菜单,那么就删除此菜单
    for (let i = editableTabs.value.length - 1; i >= 0; i--) {
        if (editableTabs.value[i].name === index) {
            // console.log(`删除页头菜单${index}`);
            editableTabs.value.splice(i, 1);
            // console.log(`删除后页头菜单数据为${JSON.stringify(editableTabs.value)}`);
        }
    }

    //如果页头菜单总数超过10个,那么就删除第一个
    if (editableTabs.value.length >= 10) {
        editableTabs.value.shift();
    }
    //添加页头菜单
    editableTabs.value.push({
        title: Tools.RouterTool.getTitleByAbsolutePath(index),
        name: index,
    });
    // console.log(`添加后页头菜单数据为${JSON.stringify(editableTabs.value)}`);
    //设置选中的页头菜单
    editableTabsValue.value = index;
};


//选中左侧菜单激活回调
const handleSelect = (index: string, indexPath: string, item: object, routeResult: object) => {

    // console.log(`index---------->${index}`);
    // console.log(`indexPath---------->${indexPath}`);
    // console.log(`item---------->${JSON.stringify(item)}`);
    // console.log(`routeResult---------->${JSON.stringify(routeResult)}`);
    // 动态添加页头菜单
    addTabs(index);
};

const handleTabsEdit = () => {

};
//
const handleOpen = function() {

};
const handleClose = function() {
//


};
</script>

<style scoped lang="scss">
//主题颜色
html.dark {
    background-color: #333;
}
.icon {
    width: 2em; height: 2em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    margin-right: 12px;
}
</style>